html{
  height:100%;
}
body{
  height: 100%;

  margin:0;
  dispaly:flex;
  align-items: center;
  justufy-content: center;
}
#canvas{
  background-color:rgb(245, 245, 245);
  width: 100vmin;
  height:100vmin;
  position:relative;}

#second{
  background-color:rgb(63,29,120);
  position:relative;
  left:0vmin;
  top: -100vmin;
  width: 33.33vmin;
  height:33.33vmin;
} 

#third{
  background-color:rgb(19, 36, 168);
  position:relative;
  left:33vmin;
  top: -133.5vmin;
  width: 33.33vmin;
  height:33.33vmin;
} 

#fourth{
  background-color:rgb(246,232,82);
  position:relative;
  left:66vmin;
  top: -166.5vmin;
  width: 33vmin;
  height:33vmin;
} 

#fifth{
  background-color:rgb(198, 194, 205);
  position:relative;
  left:0vmin;
  top: -166.5vmin;
  width: 33vmin;
  height:33vmin;
} 

#sixth{
  background-color:rgb(63,29,120);
  position:relative;
  left:0vmin;
  top: -167vmin;
  width: 33vmin;
  height:33vmin;
} 

#seventh{
  background-color:rgb(63,29,120);
  position:relative;
  left:33vmin;
  top: -233vmin;
  width: 33vmin;
  height:33vmin;
} 
#eighth{
  background-color:rgb(222, 11, 141);
  position:relative;
  left:66vmin;
  top: -266vmin;
  width: 33vmin;
  height:33vmin;
} 
#nine{
  background-color:rgb(124, 70, 212);
  position:relative;
  left:33vmin;
  top: -266vmin;
  width: 33vmin;
  height:33vmin;
} 

#last{
  background-color:rgb(70, 198, 214);
  position:relative;
  left:66vmin;
  top: -299vmin;
  width:33vmin;
  height:33vmin;
}